<template>
	<view class="message-page">
		<navBar></navBar>
		<!-- 消息列表 -->
		<view class="message-list">
			<!-- 文字消息 -->
			<message-container
				:sender="textMessage.sender"
				:address="textMessage.address"
				:time="textMessage.time"
				:isCollected="textMessage.isCollected"
				@toggleCollect="toggleCollect('text')"
				@onReply="handleReply('text')"
			>
				<text-message :content="textMessage.content" />
			</message-container>

			<!-- 图片消息 - 水平滚动 -->
			<message-container
				:sender="imageMessage.sender"
				:address="imageMessage.address"
				:time="imageMessage.time"
				:isCollected="imageMessage.isCollected"
				@toggleCollect="toggleCollect('image')"
				@onReply="handleReply('image')"
			>
				<image-message :images="imageMessage.images" />
			</message-container>

			<!-- 声音消息 -->
			<message-container
				:sender="audioMessage.sender"
				:address="audioMessage.address"
				:time="audioMessage.time"
				:isCollected="audioMessage.isCollected"
				@toggleCollect="toggleCollect('audio')"
				@onReply="handleReply('audio')"
			>
				<audio-message :audioUrl="audioMessage.audioUrl" :duration="audioMessage.duration" :title="audioMessage.title" />
			</message-container>

			<!-- 视频消息 -->
			<message-container
				:sender="videoMessage.sender"
				:address="videoMessage.address"
				:time="videoMessage.time"
				:isCollected="videoMessage.isCollected"
				@toggleCollect="toggleCollect('video')"
				@onReply="handleReply('video')"
			>
				<video-message :videoUrl="videoMessage.videoUrl" :thumbnail="videoMessage.thumbnail" :duration="videoMessage.duration" :title="videoMessage.title" />
			</message-container>

			<!-- 商品售卖消息 - 水平滚动 -->
			<message-container
				:sender="productMessage.sender"
				:address="productMessage.address"
				:time="productMessage.time"
				:isCollected="productMessage.isCollected"
				@toggleCollect="toggleCollect('product')"
				@onReply="handleReply('product')"
			>
				<product-message :products="productMessage.products" />
			</message-container>

			<!-- 店铺展示消息 -->
			<message-container
				:sender="storeMessage.sender"
				:address="storeMessage.address"
				:time="storeMessage.time"
				:isCollected="storeMessage.isCollected"
				@toggleCollect="toggleCollect('store')"
				@onReply="handleReply('store')"
			>
				<store-message :store="storeMessage.store" />
			</message-container>
		</view>
	</view>
</template>

<script>
import MessageContainer from '../../components/MessageContainer.vue';
import TextMessage from '../../components/message-types/TextMessage.vue';
import ImageMessage from '../../components/message-types/ImageMessage.vue';
import AudioMessage from '../../components/message-types/AudioMessage.vue';
import VideoMessage from '../../components/message-types/VideoMessage.vue';
import ProductMessage from '../../components/message-types/ProductMessage.vue';
import StoreMessage from '../../components/message-types/StoreMessage.vue';
import navBar from '../../components/navBar.vue';

export default {
	name: 'messages',
	components: {
		MessageContainer,
		TextMessage,
		ImageMessage,
		AudioMessage,
		VideoMessage,
		ProductMessage,
		StoreMessage,
		navBar
	},
	data() {
		return {
			// 文字消息
			textMessage: {
				sender: '张小明',
				address: '北京市朝阳区',
				time: '10分钟前',
				content: '今天天气真好，适合出去走走。有没有一起去公园的朋友？',
				isCollected: false
			},

			// 图片消息
			imageMessage: {
				sender: '李华',
				address: '上海市静安区',
				time: '30分钟前',
				images: [
					{ url: '/static/nicPic/m1.png', description: '湖边风景' },
					{ url: '/static/nicPic/m2.png', description: '山间小道' },
					{ url: '/static/nicPic/m3.png', description: '落日余晖' },
					{ url: '/static/nicPic/w1.png', description: '城市夜景' },
					{ url: '/static/nicPic/w2.png', description: '海滩风光' }
				],
				isCollected: true
			},

			// 声音消息
			audioMessage: {
				sender: '王芳',
				address: '广州市天河区',
				time: '1小时前',
				audioUrl: '/static/audio/sample.mp3',
				duration: '03:45',
				title: '清晨的鸟鸣',
				isCollected: false
			},

			// 视频消息
			videoMessage: {
				sender: '赵伟',
				address: '深圳市南山区',
				time: '2小时前',
				videoUrl: '/static/videos/sample.mp4',
				thumbnail: '/static/images/video-thumb.jpg',
				duration: '05:20',
				title: '城市宣传片',
				isCollected: false
			},

			// 商品售卖消息
			productMessage: {
				sender: '优品商城',
				address: '杭州市西湖区',
				time: '3小时前',
				products: [
					{
						id: 1,
						name: '智能手表',
						price: 1299,
						originalPrice: 1599,
						image: '/static/products/watch.jpg',
						sales: 328
					},
					{
						id: 2,
						name: '无线耳机',
						price: 799,
						originalPrice: 999,
						image: '/static/products/earbuds.jpg',
						sales: 567
					},
					{
						id: 3,
						name: '便携式充电宝',
						price: 199,
						originalPrice: 299,
						image: '/static/products/powerbank.jpg',
						sales: 1243
					},
					{
						id: 4,
						name: '蓝牙音箱',
						price: 499,
						originalPrice: 699,
						image: '/static/products/speaker.jpg',
						sales: 289
					}
				],
				isCollected: false
			},

			// 店铺展示消息
			storeMessage: {
				sender: '星辰咖啡',
				address: '成都市锦江区',
				time: '昨天 18:30',
				store: {
					name: '星辰咖啡(锦江店)',
					coverImage: '/static/store/cover.jpg',
					images: ['/static/store/img1.jpg', '/static/store/img2.jpg', '/static/store/img3.jpg'],
					description: '专注精品咖啡的连锁品牌，提供舒适的环境和优质的服务。',
					businessHours: '周一至周日 08:00-22:00',
					phone: '028-12345678',
					rating: 4.8,
					reviewCount: 368
				},
				isCollected: true
			}
		};
	},
	methods: {
		// 切换收藏状态
		toggleCollect(type) {
			this[`${type}Message`].isCollected = !this[`${type}Message`].isCollected;
			uni.showToast({
				title: this[`${type}Message`].isCollected ? '收藏成功' : '取消收藏',
				icon: 'none'
			});
		},

		// 处理回复
		handleReply(type) {
			uni.showModal({
				title: '回复消息',
				content: `回复${this[`${type}Message`].sender}的消息`,
				placeholderText: '请输入回复内容',
				success: (res) => {
					if (res.confirm) {
						uni.showToast({
							title: '回复成功',
							icon: 'none'
						});
					}
				}
			});
		}
	}
};
</script>

<style scoped>
.message-page {
	background-color: #f5f5f7;
	min-height: 100vh;
	padding-bottom: 20rpx;
}

.page-title {
	font-size: 36rpx;
	font-weight: bold;
	color: #333;
	padding: 30rpx 30rpx 15rpx;
}

.message-list {
	display: flex;
	flex-direction: column;
	gap: 20rpx;
	padding: 0 20rpx;
}
</style>
